<template>
	<view>
		<view class="end-title">
		     <view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
		        {{item}}
		    </view>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 0}">
		　<ItemStrategy></ItemStrategy>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 1}">
		</view>
		<view class="end-cont" :class="{dis:btnnum == 2}">
			<ItemGoods></ItemGoods>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 3}">
			<ItemGoodsDetails></ItemGoodsDetails>
		</view>
		
		
	</view>
</template>

<script>
	import ItemStrategy from '../public/ItemStrategy'
	import ItemGoods from '../public/ItemGoods'
	import ItemGoodsDetails from '../public/ItemGoodsDetails'
	export default {
		components:{
			ItemStrategy,
			ItemGoods,
			ItemGoodsDetails
		},
		data() {
			return {
		items:["施工攻略","免费图库","商品店铺","商品详情"],
		count:"",
			}
		},
		methods: {
			change(e) {
			     this.count = e
			     this.btnnum = e
			     console.log(this.count)
			  }
		}
	}
</script>

<style>
 .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .end-title{
          display: flex;
      }
      .end-title view{
          flex-grow: 1;
          text-align: center;
      }
     .end-cont{
		  /* width: 300rpx; */
          display: none;
          /* background: #fff; */
      }
      .btna{
          color: red;
          /* background: #00A0FF; */
      }
      .dis{
          display: block;
      }
</style>
